<template>
  <div id="box" style="margin-top: 20px">
    <div style="width: 500px;margin-left: 300px">
      <input v-show="false" ref="fileRef" type="file" @change="fileChange">
      <el-input prefix-icon="el-icon-search" placeholder="搜索..." class="input-with-select" style="font-size: 10px;">
          <div class="imageBtn" slot="suffix">
            <el-dropdown>
              <span class="el-dropdown-link"><i style="margin-top: 13px" class="el-icon-camera-solid"></i></span>
              <el-dropdown-menu slot="dropdown" style="height: 70px;">
                <el-dropdown-item>
                  <el-button size="mini" style="border: none!important;" @click="uploadFile">本地上传</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="mini" style="border: none!important;">粘贴识图</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-input>
    </div>
    <div>
      <div class="a" style="width: 300px;margin-left: 10px;margin-top:30px">
        <img :src="require('@/assets/imgs/toilet1.jpg')" class="image" width="260px" height="250px"
             style="border-radius: 10px"
        >
      </div>
      <div class="center-ads-list">
        <ul>
          <li v-for="v in list" :key="v.value">
            <img v-bind:src="v.src" alt="" width="200px" height="190px" style="border-radius: 10px">
            <h4>{{ v.des }}</h4>
            <p>{{ v.price }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'LikeImageView',
  data() {
    return {
      list: [
        {
          value: '0',
          src: require('@/assets/imgs/toilet1.jpg'),
          des: '测试图',
          price: 198
        },
        {
          value: '1',
          src: require('@/assets/imgs/toilet1.jpg'),
          des: '测试图',
          price: 198
        },
        {
          value: '2',
          src: require('@/assets/imgs/toilet1.jpg'),
          des: '测试图',
          price: 198
        },
        {
          value: '3',
          src: require('@/assets/imgs/toilet1.jpg'),
          des: '测试图',
          price: 198
        },
        {
          value: '4',
          src: require('@/assets/imgs/toilet1.jpg'),
          des: '测试图',
          price: 198
        },
        {
          value: '5',
          src: require('@/assets/imgs/toilet1.jpg'),
          des: '测试图',
          price: 198
        },
        {
          value: '6',
          src: require('@/assets/imgs/toilet1.jpg'),
          des: '测试图',
          price: 198
        },
        {
          value: '7',
          src: require('@/assets/imgs/toilet1.jpg'),
          des: '测试图',
          price: 198
        },
        {
          value: '8',
          src: require('@/assets/imgs/toilet1.jpg'),
          des: '测试图',
          price: 198
        },
        {
          value: '9',
          src: require('@/assets/imgs/toilet1.jpg'),
          des: '测试图',
          price: 198
        }, {
          value: '10',
          src: require('@/assets/imgs/toilet1.jpg'),
          des: '测试图',
          price: 198
        }, {
          value: '11',
          src: require('@/assets/imgs/toilet1.jpg'),
          des: '测试图',
          price: 198
        }

      ]
    }
  },
  methods:{
    uploadFile() {
      this.$refs.fileRef.dispatchEvent(new MouseEvent('click'))
    },
    fileChange() {
      // 上传文件
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

#box ul {
  flex-wrap: wrap;
  position: absolute;
  top: 160px;
  left: 300px;
}

#box li {
  padding: 1px;
  list-style: none;
  margin-right: 15px;
  border: 1px solid #eee;
  display: inline-block;
}

.center-ads-list {
  width: 350px;
  height: 150px;
}


</style>
